<template>
	<div class="container">
		<div class="abs">
			<el-page-header @back="$router.go(-1)" content="">
			</el-page-header>
		</div>
			<div class="tag_data" style="height: 3.75rem;">
				<div style="background-color: rgb(255, 228, 52);color: #000000;" class="item" @click="nextclick($event),dayclick()">日</div>
				<div class="lineItem"></div>
				<div class="item" @click="nextclick($event),weekclick()">周</div>
				<div class="lineItem"></div>
				<div class="item" @click="nextclick($event),monthclick()">月</div>
			</div>
		<div id="main">
		</div>
	</div>
</template>
<script>
export default {
  name: 'Echarts',
  data () {
    return {
      avtive: 0
    }
  },

  methods: {
    nextclick (e) {
	  console.log(e.target.style)
	  var itemList = document.querySelectorAll('.item')
	  itemList.forEach(function (item) {
		  item.style.backgroundColor = 'rgb(64, 158, 255)'
		  item.style.color = '#ffffff'
	  })
	  e.target.style.backgroundColor = 'rgb(255, 228, 52)'
	  e.target.style.color = 'black'
	  // this.style.backgroundColor = "yellow"
    },
    dayclick () {
      this.myEcharts()
    },
    weekclick () {
      this.myEcharts2()
    },
    monthclick () {
      this.myEcharts3()
    },
    myEcharts () {
      var echarts = require('echarts')
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom, 'dark')
      var option

      option = {
      	// title: {
      	// 	text: '每日营养分析',
        //    left: 'left',
        //    top: 'center'
      	// },
      	legend: {
      		data: ['最大所需营养', '推荐食物营养', '今日食物营养', '最小所需营养']
      	},
        color: ['#ee6666', 'rgba(85, 255, 127, 0.8)', 'rgb(120, 255, 255)', 'rgb(255, 228, 52)'],
      	radar: {
      		// shape: 'circle',
      		indicator: [{ name: '热量', max: 15000 },
            { name: '脂肪', max: 15000 },
            { name: '蛋白质', max: 15000 },
            { name: '碳水化合物', max: 15000 },
            { name: '膳食纤维', max: 15000 },
            { name: '硫胺素', max: 15000 },
            { name: '钙', max: 15000 },
            { name: '核黄素', max: 15000 },
            { name: '镁', max: 15000 },
            { name: '烟酸', max: 15000 },
            { name: '铁', max: 15000 },
            { name: '维生素C', max: 15000 },
            { name: '锰', max: 15000 },
            { name: '维生素E', max: 15000 },
            { name: '锌', max: 15000 },
            { name: '维生素A', max: 15000 },
            { name: '胆固醇', max: 15000 },
            { name: '铜', max: 15000 },
            { name: '胡罗卜素', max: 15000 },
            { name: '钾', max: 15000 },
            { name: '磷', max: 15000 },
            { name: '视黄醇当量', max: 15000 },
            { name: '钠', max: 15000 },
            { name: '硒', max: 15000 }
      		],
      		// 每个指示器名称的配置项。
      		axisName: {
      			// 是否显示
      			show: true,
      			// 文字颜色
      			color: '#428BD4',
      			// 文字背景颜色，也可以是图片
      			backgroundColor: '',
      			formatter: '【{value}】'
      		},
      		// 雷达图绘制类型polygon 多边形  circle 圆形
      		shape: 'polygon',
      		// 坐标轴线相关设置
      		// axisLine: {
      		// 	// 是否显示
      		// 	show: true,
      		// 	// 轴线两边的箭头 ['none', 'arrow'] 'none' 'arrow'
      		// 	symbol: ['none', 'arrow'],
      		// 	// 样式设置：
      		// 	// color , width , type , dashOffset , cap , join , miterLimit ,
      		// 	// shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity
      		// 	lineStyle: {
      		// 		color: 'pink'
      		// 	}
      		// },
      		// 坐标轴刻度相关设置。
      		axisTick: {
      			show: false
      		},
      		// 坐标轴刻度标签的相关设置。
      		axisLabel: {
      			show: false
      		},
      		// 坐标轴在 grid 区域中的分隔线
      		splitLine: {
      			show: true,
      			lineStyle: {
      				color: 'rgba(255, 255, 255, 0.8)',
              width: 2
      			}
      		}
      		// 坐标轴在 grid 区域中的分隔区域，默认显示。
      		// splitArea: {
      		// 	show: true,
      		// 	areaStyle: {
      		// 		color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
      		// 		shadowColor: 'rgba(0, 0, 0, 0.2)',
      		// 		shadowBlur: 10
      		// 	}
      		// }
      	},
      	series: [{
      		name: '人体所需营养素含量',
      		type: 'radar',
      		data: [{
      				value: [13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000],
      				name: '最大所需营养',
      				// 区域样式
      				areaStyle: {
      					color: '#ee6666'
      				}
      				// 线的样式
      				// lineStyle: {
      				// 	type: 'dashed'
      				// },
      			},
      			{
      				value: [10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000],
      				name: '推荐食物营养',
      				areaStyle: {
      					color: 'rgba(85, 255, 127, 0.3)'
      				}
      			},
          {
            value: [8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 7000, 8000, 10000, 13000, 8000],
            name: '今日食物营养',
            areaStyle: {
              color: 'rgba(120, 255, 255, 0.8)'
            },
            // 连接处形状
            symbol: 'rect',
            // 连接处大小
            symbolSize: 8,
            // 文字标签
            label: {
              show: false,
              formatter: function (params) {
                return params.value
              }
            }
          },
          {
            value: [5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000],
            name: '最小所需营养',
            areaStyle: {
              color: 'rgba(255, 228, 52, 0.6)'
            }
          }
      		]
      	}]
      }
      option && myChart.setOption(option)
    },
    myEcharts2 () {
	  var echarts = require('echarts')
	  var chartDom = document.getElementById('main')
	  var myChart = echarts.init(chartDom, 'dark')
	  var option

	  option = {
	  	// title: {
	  	// 	text: '每日营养分析',
	    //    left: 'left',
	    //    top: 'center'
	  	// },
	  	legend: {
	  		data: ['周最大所需营养', '周推荐食物营养', '周食物营养', '周最小所需营养']
	  	},
	    color: ['#ee6666', 'rgba(85, 255, 127, 0.8)', 'rgb(120, 255, 255)', 'rgb(255, 228, 52)'],
	  	radar: {
	  		// shape: 'circle',
	  		indicator: [{ name: '热量', max: 15000 },
	        { name: '脂肪', max: 15000 },
	        { name: '蛋白质', max: 15000 },
	        { name: '碳水化合物', max: 15000 },
	        { name: '膳食纤维', max: 15000 },
	        { name: '硫胺素', max: 15000 },
	        { name: '钙', max: 15000 },
	        { name: '核黄素', max: 15000 },
	        { name: '镁', max: 15000 },
	        { name: '烟酸', max: 15000 },
	        { name: '铁', max: 15000 },
	        { name: '维生素C', max: 15000 },
	        { name: '锰', max: 15000 },
	        { name: '维生素E', max: 15000 },
	        { name: '锌', max: 15000 },
	        { name: '维生素A', max: 15000 },
	        { name: '胆固醇', max: 15000 },
	        { name: '铜', max: 15000 },
	        { name: '胡罗卜素', max: 15000 },
	        { name: '钾', max: 15000 },
	        { name: '磷', max: 15000 },
	        { name: '视黄醇当量', max: 15000 },
	        { name: '钠', max: 15000 },
	        { name: '硒', max: 15000 }
	  		],
	  		// 每个指示器名称的配置项。
	  		axisName: {
	  			// 是否显示
	  			show: true,
	  			// 文字颜色
	  			color: '#428BD4',
	  			// 文字背景颜色，也可以是图片
	  			backgroundColor: '',
	  			formatter: '【{value}】'
	  		},
	  		// 雷达图绘制类型polygon 多边形  circle 圆形
	  		shape: 'polygon',
	  		// 坐标轴线相关设置
	  		// axisLine: {
	  		// 	// 是否显示
	  		// 	show: true,
	  		// 	// 轴线两边的箭头 ['none', 'arrow'] 'none' 'arrow'
	  		// 	symbol: ['none', 'arrow'],
	  		// 	// 样式设置：
	  		// 	// color , width , type , dashOffset , cap , join , miterLimit ,
	  		// 	// shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity
	  		// 	lineStyle: {
	  		// 		color: 'pink'
	  		// 	}
	  		// },
	  		// 坐标轴刻度相关设置。
	  		axisTick: {
	  			show: false
	  		},
	  		// 坐标轴刻度标签的相关设置。
	  		axisLabel: {
	  			show: false
	  		},
	  		// 坐标轴在 grid 区域中的分隔线
	  		splitLine: {
	  			show: true,
	  			lineStyle: {
	  				color: 'rgba(255, 255, 255, 0.8)',
	          width: 2
	  			}
	  		}
	  		// 坐标轴在 grid 区域中的分隔区域，默认显示。
	  		// splitArea: {
	  		// 	show: true,
	  		// 	areaStyle: {
	  		// 		color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
	  		// 		shadowColor: 'rgba(0, 0, 0, 0.2)',
	  		// 		shadowBlur: 10
	  		// 	}
	  		// }
	  	},
	  	series: [{
	  		name: '人体所需营养素含量',
	  		type: 'radar',
	  		data: [{
	  				value: [13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000],
	  				name: '周最大所需营养',
	  				// 区域样式
	  				areaStyle: {
	  					color: '#ee6666'
	  				}
	  				// 线的样式
	  				// lineStyle: {
	  				// 	type: 'dashed'
	  				// },
	  			},
	  			{
	  				value: [10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000],
	  				name: '周推荐食物营养',
	  				areaStyle: {
	  					color: 'rgba(85, 255, 127, 0.3)'
	  				}
	  			},
	      {
	        value: [8000, 8000, 8000, 10000, 10000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 7000, 8000, 10000, 13000, 8000],
	        name: '周食物营养',
	        areaStyle: {
	          color: 'rgba(120, 255, 255, 0.8)'
	        },
	        // 连接处形状
	        symbol: 'rect',
	        // 连接处大小
	        symbolSize: 8,
	        // 文字标签
	        label: {
	          show: false,
	          formatter: function (params) {
	            return params.value
	          }
	        }
	      },
	      {
	        value: [5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000],
	        name: '周最小所需营养',
	        areaStyle: {
	          color: 'rgba(255, 228, 52, 0.6)'
	        }
	      }
	  		]
	  	}]
	  }
	  option && myChart.setOption(option)
    },
    myEcharts3 () {
	  var echarts = require('echarts')
	  var chartDom = document.getElementById('main')
	  var myChart = echarts.init(chartDom, 'dark')
	  var option

	  option = {
	  	// title: {
	  	// 	text: '每日营养分析',
	    //    left: 'left',
	    //    top: 'center'
	  	// },
	  	legend: {
	  		data: ['月最大所需营养', '月推荐食物营养', '月食物营养', '月最小所需营养']
	  	},
	    color: ['#ee6666', 'rgba(85, 255, 127, 0.8)', 'rgb(120, 255, 255)', 'rgb(255, 228, 52)'],
	  	radar: {
	  		// shape: 'circle',
	  		indicator: [{ name: '热量', max: 15000 },
	        { name: '脂肪', max: 15000 },
	        { name: '蛋白质', max: 15000 },
	        { name: '碳水化合物', max: 15000 },
	        { name: '膳食纤维', max: 15000 },
	        { name: '硫胺素', max: 15000 },
	        { name: '钙', max: 15000 },
	        { name: '核黄素', max: 15000 },
	        { name: '镁', max: 15000 },
	        { name: '烟酸', max: 15000 },
	        { name: '铁', max: 15000 },
	        { name: '维生素C', max: 15000 },
	        { name: '锰', max: 15000 },
	        { name: '维生素E', max: 15000 },
	        { name: '锌', max: 15000 },
	        { name: '维生素A', max: 15000 },
	        { name: '胆固醇', max: 15000 },
	        { name: '铜', max: 15000 },
	        { name: '胡罗卜素', max: 15000 },
	        { name: '钾', max: 15000 },
	        { name: '磷', max: 15000 },
	        { name: '视黄醇当量', max: 15000 },
	        { name: '钠', max: 15000 },
	        { name: '硒', max: 15000 }
	  		],
	  		// 每个指示器名称的配置项。
	  		axisName: {
	  			// 是否显示
	  			show: true,
	  			// 文字颜色
	  			color: '#428BD4',
	  			// 文字背景颜色，也可以是图片
	  			backgroundColor: '',
	  			formatter: '【{value}】'
	  		},
	  		// 雷达图绘制类型polygon 多边形  circle 圆形
	  		shape: 'polygon',
	  		// 坐标轴线相关设置
	  		// axisLine: {
	  		// 	// 是否显示
	  		// 	show: true,
	  		// 	// 轴线两边的箭头 ['none', 'arrow'] 'none' 'arrow'
	  		// 	symbol: ['none', 'arrow'],
	  		// 	// 样式设置：
	  		// 	// color , width , type , dashOffset , cap , join , miterLimit ,
	  		// 	// shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity
	  		// 	lineStyle: {
	  		// 		color: 'pink'
	  		// 	}
	  		// },
	  		// 坐标轴刻度相关设置。
	  		axisTick: {
	  			show: false
	  		},
	  		// 坐标轴刻度标签的相关设置。
	  		axisLabel: {
	  			show: false
	  		},
	  		// 坐标轴在 grid 区域中的分隔线
	  		splitLine: {
	  			show: true,
	  			lineStyle: {
	  				color: 'rgba(255, 255, 255, 0.8)',
	          width: 2
	  			}
	  		}
	  		// 坐标轴在 grid 区域中的分隔区域，默认显示。
	  		// splitArea: {
	  		// 	show: true,
	  		// 	areaStyle: {
	  		// 		color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
	  		// 		shadowColor: 'rgba(0, 0, 0, 0.2)',
	  		// 		shadowBlur: 10
	  		// 	}
	  		// }
	  	},
	  	series: [{
	  		name: '人体所需营养素含量',
	  		type: 'radar',
	  		data: [{
	  				value: [13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000, 13000],
	  				name: '月最大所需营养',
	  				// 区域样式
	  				areaStyle: {
	  					color: '#ee6666'
	  				}
	  				// 线的样式
	  				// lineStyle: {
	  				// 	type: 'dashed'
	  				// },
	  			},
	  			{
	  				value: [10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000],
	  				name: '月推荐食物营养',
	  				areaStyle: {
	  					color: 'rgba(85, 255, 127, 0.3)'
	  				}
	  			},
	      {
	        value: [10000, 12000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 8000, 7000, 8000, 10000, 13000, 8000],
	        name: '月食物营养',
	        areaStyle: {
	          color: 'rgba(120, 255, 255, 0.8)'
	        },
	        // 连接处形状
	        symbol: 'rect',
	        // 连接处大小
	        symbolSize: 8,
	        // 文字标签
	        label: {
	          show: false,
	          formatter: function (params) {
	            return params.value
	          }
	        }
	      },
	      {
	        value: [5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000],
	        name: '月最小所需营养',
	        areaStyle: {
	          color: 'rgba(255, 228, 52, 0.6)'
	        }
	      }
	  		]
	  	}]
	  }
	  option && myChart.setOption(option)
    }
  },
  created () {},
  mounted () {
    this.myEcharts()
  }
}
</script>

<style scoped>
	body {
		margin: 0;
	}

	.container {
		position: relative;
		width: 10rem;
		height: 5.625rem;
		margin: 0 auto;
		background: #100c2a;
		border: 1px solid #797979;
	}

	#main {
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	.tag_data{
		position: absolute;
		top: 50%;
		left:0.3125rem;
		transform: translateY(-50%);
		z-index: 10;
		/* background-color: #FFF0FF; */
		text-align: center;
	}
	.tag_data .item{
		width: 0.1875rem;
		height: 0.1875rem;
		border-radius: 50%;
		background-color:rgb(64, 158, 255) ;
		color: #FFFFFF;
		line-height: 0.1875rem;
	}
	.tag_data .lineItem{
		width: 2px;
		height: 1.59375rem;
		border: 1px solid rgb(64, 158, 255);
		margin-left: 50%;
		transform: translateX(-50%);
	}
</style>
